<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':(type=='0'?'修改':'查询'))}}采购价格单</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form" :data-options="JSON.stringify({'tableName':'purchase_unitprice','formName':'dataForm' ,'primaryKey':'Purchase_Unit_Price_SerialNumber'})">
                    <!-- 子表 -->
                    <div :data-options="JSON.stringify({'tableName':'purchase_unitprice_detail','formName':'childDataForm', 'parentTableName':'purchase_unitprice'})"></div>
                </div>

                <div class="table_titel">
                    <div class="titel">采购价格单信息</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <!-- <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">采购价格单流水号</div>
                            </template>
                            <el-form-item prop="Purchase_Unit_Price_SerialNumber" :rules="[{ required: true, message: '请输入采购价格单流水号', trigger: 'blur' }]">
                                <el-input :disabled="type=='1'" v-model.trim="dataForm.Purchase_Unit_Price_SerialNumber" placeholder="请输入采购价格单流水号" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item> -->

                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">开始日期</div>
                            </template>
                            <el-form-item prop="Start_Date" :rules="[{ required: true, message: '请输入开始日期', trigger: 'blur' }]">
                                <el-date-picker :disabled="type=='1'" v-model.trim="dataForm.Start_Date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>
                        
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">结束日期</div>
                            </template>
                            <el-form-item prop="End_Date">
                                <el-date-picker :disabled="type=='1'" v-model="dataForm.End_Date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期（留空表示长期有效）" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>
                        
                        <!-- <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">企业编号</div>
                            </template>
                            <el-form-item prop="Enterprise_Info_SerialNumber" :rules="[{ required: true, message: '请输入企业编号', trigger: 'blur' }]">
                                <el-input :disabled="type=='1'" v-model.trim="dataForm.Enterprise_Info_SerialNumber" placeholder="请输入企业编号" clearable @blur="handleEnterpriseChange"></el-input>
                            </el-form-item>
                        </el-descriptions-item> -->
                    
                    </el-descriptions>
                </el-form>

                <div class="table_titel">
                    <div class="titel">采购信息</div>
                    <div class="operation" v-if="type=='0'">
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                    </div>
                </div>

                <el-form :model="{childDataForm:childDataForm.filter(i=>!i.Row_Status || i.Row_Status != '1')}" ref="childForm" 
                    :inline-message="true" style="width: 100%">
                    <template v-for="(item,index) in childDataForm.filter(i=>!i.Row_Status || i.Row_Status != '1')">
                        <el-descriptions :column="2" size="large" border :key="`purchase-${index}-${item.Article_SerialNumber || ''}-${item.Specifications_SerialNumber || ''}`">
                            <el-descriptions-item>
                                <template slot="label">
                                    <div class="cell-item required">商品编号</div>
                                </template>
                                <el-form-item :prop="`childDataForm.${getOriginalIndex(item)}.Article_SerialNumber`" :rules="[{ required: true, message: '请选择商品', trigger: 'change' }]">
                                    <el-select :disabled="type=='1'" v-model.trim="item.Article_SerialNumber" placeholder="请选择商品" filterable style="width: 100%" clearable @change="handleArticleChange(item)">
                                        <el-option v-for="(articleItem, articleIndex) in articleList" :key="articleIndex" 
                                            :label="articleItem.Article_Name || articleItem.Article_SerialNumber" 
                                            :value="articleItem.Article_SerialNumber"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    <div class="cell-item required">规格编号</div>
                                </template>
                                <el-form-item :prop="`childDataForm.${getOriginalIndex(item)}.Specifications_SerialNumber`" :rules="[{ required: true, message: '请选择规格', trigger: 'change' }]">
                                    <el-select :disabled="type=='1'" v-model.trim="item.Specifications_SerialNumber" placeholder="请选择规格" filterable style="width: 100%" clearable :key="`spec-select-${item.Article_SerialNumber || ''}`">
                                        <el-option v-for="(specItem, specIndex) in getSpecificationsByArticle(item.Article_SerialNumber)" :key="specIndex" 
                                            :label="specItem.Specifications_Name || specItem.Specifications_SerialNumber" 
                                            :value="specItem.Specifications_SerialNumber"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    <div class="cell-item required">采购单价</div>
                                </template>
                                <el-form-item :prop="`childDataForm.${getOriginalIndex(item)}.Purchase_Unit_Price`" :rules="[{ required: true, message: '请输入采购单价', trigger: 'blur' }]">
                                    <el-input :disabled="type=='1'" v-model.trim="item.Purchase_Unit_Price" placeholder="请输入采购单价" clearable></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                        </el-descriptions>
                    </template>
                    <div v-if="childDataForm.filter(i=>!i.Row_Status || i.Row_Status != '1').length === 0" style="padding: 20px; text-align: center; color: #999;">
                        暂无采购信息，请点击上方"新增"按钮添加
                    </div>
                </el-form>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button v-if="type=='0'" size="medium" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>